<template>
  <div>
    <!-- 轮播图 -->
    <el-carousel height="400px">
      <el-carousel-item v-for="item in images" :key="item.id">
        <img :src="item.image" style="height: 400px" />
      </el-carousel-item>
    </el-carousel>

    <!-- 展示选中的关键词 -->
    <el-tag
      v-for="(item, index) in choiceTags"
      closable
      @close="onClose(index, item)"
    >
      {{ item.value }}
    </el-tag>

    <!-- 筛选菜单 -->
    <div class="table" style="height: 125px">
      <div v-if="isBrandShow" style="width: 100%; display: flex">
        <div class="title">品类</div>
        <div class="content">
          <div
            class="item"
            v-for="(item, index) in filterMenu.brand"
            :key="index"
            @click="onClick(item, 'brand')"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div v-if="isPriceShow" style="width: 100%; display: flex">
        <div class="title">价格</div>
        <div class="content">
          <div
            class="item"
            v-for="(item, index) in filterMenu.price"
            :key="index"
            @click="onClick(item, 'price')"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div style="width: 100%; display: flex">
        <div class="title">类型</div>
        <div class="content">
          <div
            class="item"
            v-for="(item, index) in filterMenu.type"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="phone-list">
      <ProductItem
        v-for="(item, index) in productList"
        :productData="item"
        :key="item.id + index"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ProductItem from "./ProductItem";
export default {
  components: {
    ProductItem,
  },
  data() {
    return {
      images: [], // 轮播图图片数组
      productList: [], // 商品列表数据
      filterMenu: {}, // 筛选菜单数据
      choiceTags: [], // 选中的菜单关键词
      isBrandShow: true,
      isPriceShow: true,
    };
  },
  created() {
    // 获取轮播图接口
    axios.get("/v1/home/banner").then((res) => {
      // 判断code，如果== -90001，跳转到登录页面
      if (res.data.code == -90001) {
        this.$router.push({
          name: "login",
        });
      }
      this.images = res.data;
    });
    // 获取商品列表接口
    axios.get("/v1/home/phoneList").then((res) => {
      this.productList = res.data;
    });
    // 获取筛选菜单
    axios.get("/v1/home/filterMenu").then((res) => {
      this.filterMenu = res.data;
    });
  },
  methods: {
    onClick(item, type) {
      // 把关键词放入数组
      this.choiceTags.push({
        type: type,
        value: item,
      });
      // 隐藏对应的类型行
      if (type == "brand") {
        this.isBrandShow = false;
      } else if (type == "price") {
        this.isPriceShow = false;
      }
    },
    onClose(index, item) {
      this.choiceTags.splice(index, 1);
      // 显示对应的类型行
      if (item.type == "brand") {
        this.isBrandShow = true;
      } else if (item.type == "price") {
        this.isPriceShow = true;
      }
    },
  },
};
</script>

<style scoped>
.phone-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 60px;
}

.table {
  border-top: 1px solid #ddd;
  margin-top: 30px;
}

.title {
  width: 200px;
  height: 30px;
  line-height: 40px;
  text-align: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}
.content {
  flex: 1;
  display: flex;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}
.item {
  padding: 0 10px;
  color: #005aa0;
  cursor: pointer;
}
</style>